<template>
  <div>
    <data-table
      ref="pagingTable"
      :options="options"
      :list-query="listQuery"
    >
      <template #filter-content>

        <el-input v-model="listQuery.params.title" placeholder="题库名称" style="width: 200px;" class="filter-item" /> 

        <depart-tree-select v-model="listQuery.params.schoolId" placeholder="学校/部门" clearable class="filter-item" :options="departOptions"/>

        <el-select v-model="listQuery.params.departType" placeholder="学科类型" clearable class="filter-item">
          <el-option
            v-for="item in departTypes"
            :key="item.id"
            :label="item.typeName"
            :value="item.typeName"
          /> 
        </el-select>

        <el-button class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">
          搜索
        </el-button>
        
        <div class="filter-container">
          <el-button class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-plus" @click="handleCreate">
            添加
          </el-button>
        </div>
      </template>

      <template #data-columns>

        <el-table-column
          label="题库名称"
          prop="title"
          show-overflow-tooltip
        />

        <el-table-column
          label="学科类型"
          prop="departType"
          width="150"
        />

        <el-table-column
          label="创建人"
          prop="ownerName"
          width="120"
        />

        <el-table-column
          label="题目数量"
          align="center"
          width="100"
        >
          <template v-slot="{row}">
            {{ (row.radioCount||0) + (row.multiCount||0) + (row.judgeCount||0) }}
          </template>
        </el-table-column>

        <el-table-column
          label="操作"
          align="center"
          width="220"
          fixed="right"
        >
          <template v-slot="{row}">
            <el-button type="primary" size="mini" @click="handlerPaper(row)">
              题目管理
            </el-button>

            <el-dropdown size="mini" style="margin-left: 10px" @command="handleCommand">
              <el-button size="mini" type="primary">
                更多<i class="el-icon-arrow-down el-icon--right" />
              </el-button>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item :command="{type:'publish', id: row.id}" :disabled="row.isPublic">
                  发布
                </el-dropdown-item>
                <el-dropdown-item :command="{type:'unpublish', id: row.id}" :disabled="!row.isPublic">
                  取消发布
                </el-dropdown-item>
                <el-dropdown-item :command="{type:'edit', id: row.id}">
                  编辑
                </el-dropdown-item>
                <el-dropdown-item :command="{type:'delete', id: row.id}">
                  删除
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </template>
        </el-table-column>

      </template>

    </data-table>

    <el-dialog
      :visible.sync="dialogVisible"
      :title="dialogTitle"
      width="30%"
    >
      <el-form label-position="left" label-width="100px">
        <el-form-item label="学科类型名称">
          <el-input v-model="newDepartType" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveDepartType">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import DataTable from '@/components/DataTable'
import { deleteData, publish, unpublish } from '@/api/qu/repo'
import { saveData as saveDepartTypeApi, listAll, deleteData as deleteDepartType } from '@/api/repo/departType'
import DepartTreeSelect from '@/components/DepartTreeSelect'

export default {
  name: 'RepoList',
  components: { DataTable, DepartTreeSelect },
  data() {
    return {
      departTypes: [],
      dialogVisible: false,
      dialogTitle: '',
      newDepartType: '',
      listQuery: {
        current: 1,
        size: 10,
        params: {

        }
      },

      options: {

        // 列表请求URL
        listUrl: '/exam/api/repo/paging',

        // 删除请求URL
        deleteUrl: '/exam/api/repo/delete'
      }
    }
  },
  created() {
    this.fetchDepartTypes()
  },
  methods: {
    fetchDepartTypes() {
      listAll().then(response => {
        this.departTypes = response.data
      })
    },

    handleFilter() {
      this.$refs.pagingTable.getList()
    },
    
    handleCreate() {
      this.$router.push({ name: 'AddRepo' })
    },

    handlerPaper(row) {
      this.$router.push({ name: 'ListQu', query: { repoId: row.id }})
    },

    handleCommand(cmd) {
      const id = cmd.id
      if (cmd.type === 'delete') {
        this.$confirm('确定要删除此题库吗？', '删除确认').then(() => {
          deleteData({ id: id }).then(() => {
            this.$message.success('删除成功')
            this.$refs.pagingTable.getList()
          })
        }).catch(() => {})
      }

      if (cmd.type === 'publish') {
        publish({ id: id }).then(() => {
          this.$message.success('发布成功')
          this.$refs.pagingTable.getList()
        })
      }

      if (cmd.type === 'unpublish') {
        unpublish({ id: id }).then(() => {
          this.$message.success('取消发布成功')
          this.$refs.pagingTable.getList()
        })
      }

      if (cmd.type === 'edit') {
        this.$router.push({ name: 'UpdateRepo', params: { id: id }})
      }
    },

    addDepartType() {
      this.dialogTitle = '添加学科类型'
      this.newDepartType = ''
      this.dialogVisible = true
    },

    saveDepartType() {
      if (!this.newDepartType) {
        this.$message.warning('请输入学科类型名称')
        return
      }

      const data = {
        typeName: this.newDepartType
      }

      saveDepartTypeApi(data).then(() => {
        this.$message.success('保存成功')
        this.dialogVisible = false
        this.fetchDepartTypes()
      })
    }
  }
}
</script>

<style scoped>
.filter-container {
  margin-bottom: 10px;
}
</style>